// Editor

#tangible_template_assets_editor {
  .template-assets {
    margin-bottom: 1rem;
  }

  .template-asset {
    display: flex;
    width: 100%;

    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #ddd;
  }

  .template-asset:not(:first-child) {
    margin-top: 0.5rem;
  }

  .template-asset:last-child {
    border-bottom: 1px solid #ddd;
  }

  // Icon

  .icon {
    width: 18px;
    height: 18px;

    cursor: pointer;

    svg path {
      fill: #999;
      stroke: #999;
      transition: all 0.3s;
    }

    &:hover svg path {
      fill: #000;
      stroke: #000;
    }
  }

  // Asset fields

  .template-asset-fields {
    // flex: 1 0 auto; // Grow

    // display: flex;
    // flex-direction: row;
    // align-items: flex-start;

    flex-wrap: wrap;
  }

  .template-asset-field {
    // height: 100%;

    // display: flex;
    // flex-direction: row;
    // align-items: center;

    margin-right: 0.5rem;

    label {
      cursor: default;
      margin-right: 0.5rem;
    }

    &.template-asset-field--name input {
      max-width: 18rem;
      margin-bottom: 0.5rem;
    }

    .template-asset--duplicate-name-message {
      color: red;
      font-weight: 500;
    }
  }

  // Asset actions

  .template-asset-actions {
    flex: 1 0 auto; // Grow

    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .template-asset-action {
    height: 100%;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  .template-asset-action--remove-asset .icon {
    width: 14px;
    height: 14px;
  }

  .template-asset-action--remove-asset:hover svg path {
    fill: red;
    stroke: red;
  }
}

// Documentation

#tangible_template_assets_documentation {
  pre code {
    display: block;
    max-width: 620px;
    padding: 4px 6px;
  }
}
